<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#">
	<head>
		<meta charset="UTF-8"/>
		<meta name="description" content="Site de relacionamento animal" />

		<!--start of styles-->
		<link rel="stylesheet" type="text/css" href="../css/south-street/jquery-ui-1.8.20.custom.css" />
		<link rel="stylesheet" type="text/css" href="../css/layout.css" />
		<link rel="stylesheet" type="text/css" href="../css/slide.css" />
		<link rel="stylesheet" type="text/css" href="../css/facebook.css" />
		<!--end of styles-->
		
		<script type="text/javascript" src="../js/jquery/jquery-1.7.2.js"></script>
		<script type="text/javascript" src="../js/jquery/jquery-ui-1.8.21.custom.js"></script>
		<script type="text/javascript" src="../js/parts/login.js"></script>
		<script type="text/javascript" src="../js/facebook.js"></script>
		
		<script type="text/javascript">
// 			$(document).ready(function(){
// 				login.create();
// 			});
			
			$(document).ready(function(){
				if($("#content").length == 0){
					return;
				}
				
				var loginContainer = $("<div />", { id: "toppanel" });
				$("#content").before(loginContainer);
				loginContainer.load("parts/login.html #login-content", function(){
					login.create();
				});
			});

		</script>
	</head>

	<body>
		<!-- Panel para o login -->
		<div id="login-content">
			<div id="panel">
				<div class="content clearfix">
					<div class="left">
						<h1>Sejam bem vindos(as) ao dotcao</h1>
						<h2>O seu canal de comunicação em adoção</h2>		
						<p class="grey">
							Aqui você pode encontrar um lar para um cão que pretenda doar ou
							encontrar um cão disponível para adoção</p>
					</div>
					
					<div id="auth-member-login" class="left">
						<!-- Login Form -->
							<h1>Membro</h1>
							<a href="#" id="auth-loginlink" class="facebook">Login com Facebook</a>
							<label class="grey" for="login-username">Usuário:</label>
							<input class="field" type="text" name="login-username" id="login-username" value="" size="23" />
							<label class="grey" for="login-password">Senha:</label>
							<input class="field" type="password" name="login-password" id="login-password" size="23" />
							<div class="clear"></div>
							<input type="submit" name="submit" id="login-send" value="Entrar" class="bt_login" />
							<a class="lost-pwd" href="#">Perdeu sua senha?</a>
					</div>
	
					<div id="auth-member" class="left" style="display: none;">
						<img id="member-picture" src="images/no-image.png"/>
						<br/>
						<span id="member-name">Convidado</span>
					</div>
					
					<div class="left right">			
						<h1>Ainda não é membro? Cadastre-se!</h1>				
						<label class="grey" for="register-name">Primeiro nome:</label>
						<input class="field" type="text" name="register-name" id="register-name" size="23" />
						<label class="grey" for="register-email">E-mail:</label>
						<input class="field" type="text" name="register-email" id="register-email" size="23" />
						<label>Você receberá as instruções para completar seu cadastro neste e-mail.</label>
						<input type="submit" id="btn-register" value="Registrar" class="bt_register" />
					</div>
				</div>
			</div>
			<!-- Fim do para o login -->
			
			<!-- The tab on top -->	
			<div class="tab">
				<ul class="login">
					<li class="left">&nbsp;</li>
					<li>
						<div id="auth-loggedin" style="color: #FFFFFF;">
	        						Olá, <span id="auth-displayname">Convidado!</span>
	        						<span id="link-logout" style="display: none">
	       						(<a href="#" id="auth-logoutlink">logout</a>)
	        						</span>  
	   							</div>
					</li>
					<li class="sep">|</li>
					<li id="toggle">
						<a id="open" class="open" href="#">Entrar | Registrar-se</a>
						<a id="close" style="display: none;" class="close" href="#">Fechar painel</a>			
					</li>
					<li class="right">&nbsp;</li>
				</ul> 
			</div> 
			<!-- / top -->
		</div>
	</body>
</html>